<template>
  <div class="app-container">
    <el-card class="is-always-shadow">
      <el-row :gutter="15">
        <el-col :xs="24" :sm="24" :lg="8" :xl="8" :md="8" class="count-wrapper-0">
          <div class="count-content">
            <div class="count-content-title">生产基地数量</div>
            <div class="count-content-title">
              <span class="count-content-number">{{basicInfo.count}}</span>
              <span  class="count-content-unit">个</span>
              <span  class="count-content-year"></span>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8" :xl="8" :md="8" class="count-wrapper-1">
          <div class="count-content">
            <div class="count-content-title">总生产线</div>
            <div class="count-content-title">
              <span class="count-content-number">{{basicInfo.sumProductionLine}}</span>
              <span  class="count-content-unit">个</span>
              <span  class="count-content-year"></span>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8" :xl="8" :md="8" class="count-wrapper-2">
          <div class="count-content">
            <div class="count-content-title">全年总产能</div>
            <div class="count-content-title">
              <span class="count-content-number">{{basicInfo.sumGrowth}}</span>
              <span  class="count-content-unit">个</span>
              <span  class="count-content-year">年同比</span>
              <span class="count-content-year-value"> {{basicInfo.growth}}% </span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class=" line-wrapper is-always-shadow">
      <template slot="header">
        <div  class="title-header">
          <span  class="title-line"></span>
          <span  class="title-text">生产基地年固定产能&amp;满产产能趋势</span>
        </div>
      </template>
      <div class="line-chart" ref="lineChart">

      </div>
    </el-card>
    <el-row :gutter="15">
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <el-card class=" line-wrapper is-always-shadow">
          <template slot="header">
            <div  class="title-header">
              <span  class="title-line"></span>
              <span  class="title-text">企业供货产品类型分布</span>
            </div>
          </template>
          <div class="status-chart" ref="statusChart">

          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
        <el-card class=" line-wrapper is-always-shadow">
          <template slot="header">
            <div  class="title-header">
              <span  class="title-line"></span>
              <span  class="title-text">企业供货产品类型分布</span>
            </div>
          </template>
          <div class="map-chart" ref="mapChart">

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>
<script>
import request from "@/utils/request";
const china = require("./china.json")
import * as echarts from 'echarts';
export default {
  name: "baseStatistics",
  data(){
    return{
      basicInfo:{

      }
    }
  },
  mounted() {
    request({
      url:"/info/base/basicInfo",
      method:"get",
      params:{
        name:"单位一"
      }
    }).then(res=>{
      this.basicInfo = res.data;
    })

    this.lineChartRender();
    this.statusChartRender();
    this.mapChartRedner();
  },
  methods:{
    lineChartRender(){
      var myChart = echarts.init(this.$refs.lineChart);
      var option;
      // 企业供货产品类型分布&满产产能趋势
      request({
        url:"/info/base/capacity",
        method:"get",
        params:{
          name:"单位一"
        }
      }) .then(res=>{
        console.log(res)
        const ebFixedCapacity = [];
        const ebMaxCapacity = [];
        const ebName = [];
        if(res.data){
          res.data.forEach(item=>{
            ebFixedCapacity.push(item.eb_fixed_capacity)
            ebMaxCapacity.push(item.eb_max_capacity)
            ebName.push(item.eb_base_name)
          })

          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              data: ebName
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: ebName
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '固定产能',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: ebFixedCapacity
              },
              {
                name: '满产产能',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: ebFixedCapacity
              }
            ]
          };

          myChart.setOption(option);
          window.addEventListener("resize",()=>{
            myChart.resize();
          })
        }
      })

    },

    statusChartRender(){
      var myChart = echarts.init(this.$refs.statusChart);
      var option;
      request({
        url:"/info/base/productTypeDistribution",
        method:"get",
        params:{
          name:"单位一"
        }
      }).then(res=>{
        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '5%',
            left: 'center'
          },
          series: [
            {
              name: '企业供货产品类型分布',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label:{
                formatter:"{b}:{c}"
              },
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              data: res.data.map(item=>({
                value:item.count,
                name:item.dict_label
              }))
            }
          ]
        };
        myChart.setOption(option);
        window.addEventListener("resize",()=>{
          myChart.resize();
        })
      })

    },


    mapChartRedner(){
      echarts.registerMap('china',china)
      request({
        url:"/info/base/ranking",
        method:"get",
        params:{
          name:"单位一"
        }
      }).then(res=>{
        const data = res.data.map(item=>{
          const name = item.level_name.split(",")
          const code = item.level_code.split(",")
          return {
            code:code[0],
            name: name[0].replace("市",''),
            value: item.count,
          }
        })
        var myChart = echarts.init(this.$refs.mapChart);
        var option = {
          tooltip: {
            trigger: 'item',
            formatter(params){
              console.log(params)
              return params.name+": "+ (params.data?params.data.value:'-')
            }
          },
          visualMap: {
            min: 0,
            max: 1000,
            left: 26,
            bottom: 40,
            showLabel: false,
            text: ["高", "低"],

            show: false,
          },
          geo: {
            map: "china",
            roam: false,
            scaleLimit: {
              min: 1,
              max: 2,
            },
            left: 50,
            zoom: 1.23,
            label: {
              normal: {
                show: true,
                fontSize: "12",
                color: "rgba(0,0,0,0.7)",
              },
            },
            itemStyle: {
              normal: {
                //shadowBlur: 50,
                //shadowColor: 'rgba(0, 0, 0, 0.2)',
                borderColor: "rgba(0, 0, 0, 0.2)",
              },
              emphasis: {
                areaColor: "#f2d5ad",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0,
              },
            },
          },
          series: [
            {
              name: "企业供货产品类型分布",
              type: "map",
              geoIndex: 0,
              selectedMode: false,
              data: data,
            },
          ],
        };
        myChart.setOption(option);
      })


    }
  }
}
</script>
<style scoped lang="scss">
.el-card {
  -webkit-border-radius: 2.5px;
  -moz-border-radius: 2.5px;
  border-radius: 2.5px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
  transition: .3s
}

.el-card.is-always-shadow,.el-card.is-hover-shadow:focus,.el-card.is-hover-shadow:hover {
  -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  -moz-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.is-always-shadow{
  margin-bottom: 20px;
  ::v-deep .el-card__header{
    border-bottom: 1px solid transparent;
  }
}
.title-header {
  margin:0  20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  align-items: center
}

.title-header .title-line {
  background: #0091ff;
  -webkit-box-shadow: 0 0 4px 0 rgba(5,90,254,.2);
  -moz-box-shadow: 0 0 4px 0 rgba(5,90,254,.2);
  box-shadow: 0 0 4px 0 rgba(5,90,254,.2);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 4px;
  height: 16px;
  margin-right: 5px
}

.title-header .title-text {
  font-size: 16px;
  color: #333;
  font-weight: 500
}
.count-content {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  height: 128px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden
}

.count-content-title {
  color: #fff;
  font-size: 16px;
  padding: 20px
}

.count-content-number {
  color: #fff;
  font-size: 24px;
  padding-right: 5px
}

.count-content-unit {
  font-size: 16px;
  padding-right: 15px
}

.count-content-year-value,.count-content-year {
  font-size: 14px;
  padding-right: 5px
}
.count-wrapper-0,.count-wrapper-1,.count-wrapper-2{
  margin-bottom: 10px;
}
.count-wrapper-0 .count-content {
  background-image: url(../../../assets/images/product-numbe.png)
}

.count-wrapper-1 .count-content {
  background-image: url(../../../assets/images/product-total.png)
}

.count-wrapper-2 .count-content {
  background-image: url(../../../assets/images/product-year.png)
}


.line-wrapper .line-chart, .line-wrapper .map-chart, .line-wrapper .status-chart {
  height: 300px
}

</style>
